<template>
  <div>
    <van-cell class="aa" value="轻奢" />

    <van-search
      v-model="value"
      shape="round"
      input-align="center"
      placeholder="请输入搜索关键词"
      @search="onSearch"
    >
    </van-search>

    <van-sticky>
    <van-tabs>
      <van-tab v-for="(item, index) in list" :key="index" :title="item.title">
      </van-tab>
    </van-tabs>
     </van-sticky>
   
    <van-tabbar v-model="active" active-color="#ff4070">
      <van-tabbar-item icon="wap-home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="friends-o">拼团</van-tabbar-item>
      <van-tabbar-item icon="bag-o">购物车</van-tabbar-item>
      <van-tabbar-item icon="contact">我的</van-tabbar-item>
    </van-tabbar>
   

    <div class="top">
      <p class="bb">
        <span class="cc">
          <van-icon name="apps-o" size="20" />
        </span>
        <span> 今日特惠 </span>
      </p>
    </div>

    <div class="cen">
      <div class="lef"></div>

      <div class="rgt">
        <div class="tp">
          <span class="sp1">1.2折</span> <br />
          <span class="sp2">时尚简约 初夏必备</span> <br />
          <span class="sp3">C&C偏光太阳镜 </span>
        </div>
        <div class="bt">
          <span class="sp4">今日特惠价：</span>
          <span class="sp5">￥79</span> &nbsp; <span class="sp6">699</span>
          <br />
          <van-tag
            plain
            type="primary"
            round="true"
            size="large"
            color="#ff4070"
            >官方授权</van-tag
          >
        </div>
      </div>
    </div>

    <div class="top">
      <p class="bb">
        <span class="cc">
          <van-icon name="apps-o" size="20" />
        </span>
        <span> 精选活动 </span>
      </p>
    </div>
     <div class="main">
       <div class="fot">
      <div class="fot1">
        <img src="./assets/5.png" alt="" />
      </div>
      <div class="fot2">
        <span class="sp7">ADLV服饰专场</span>
        <span class="sp8">acme de la vie</span><br />
        <span class="sp9">仅剩01天13时03分</span>
      </div>
    </div>

    <div class="fot">
      <div class="fot1">
        <img src="./assets/5.png" alt="" />
      </div>
      <div class="fot2">
        <span class="sp7">ADLV服饰专场</span>
        <span class="sp8">acme de la vie</span><br />
        <span class="sp9">仅剩01天13时03分</span>
      </div>
    </div>

    <div class="fot">
      <div class="fot1">
        <img src="./assets/5.png" alt="" />
      </div>
      <div class="fot2">
        <span class="sp7">ADLV服饰专场</span>
        <span class="sp8">acme de la vie</span><br />
        <span class="sp9">仅剩01天13时03分</span>
      </div>
    </div>

    <div class="fot">
      <div class="fot1">
        <img src="./assets/5.png" alt="" />
      </div>
      <div class="fot2">
        <span class="sp7">ADLV服饰专场</span>
        <span class="sp8">acme de la vie</span><br />
        <span class="sp9">仅剩01天13时03分</span>
      </div>
    </div>

    <div class="fot">
      <div class="fot1">
        <img src="./assets/5.png" alt="" />
      </div>
      <div class="fot2">
        <span class="sp7">ADLV服饰专场</span>
        <span class="sp8">acme de la vie</span><br />
        <span class="sp9">仅剩01天13时03分</span>
      </div>
    </div>

    <div class="fot">
      <div class="fot1">
        <img src="./assets/5.png" alt="" />
      </div>
      <div class="fot2">
        <span class="sp7">ADLV服饰专场</span>
        <span class="sp8">acme de la vie</span><br />
        <span class="sp9">仅剩01天13时03分</span>
      </div>
    </div>

    <div class="fot">
      <div class="fot1">
        <img src="./assets/5.png" alt="" />
      </div>
      <div class="fot2">
        <span class="sp7">ADLV服饰专场</span>
        <span class="sp8">acme de la vie</span><br />
        <span class="sp9">仅剩01天13时03分</span>
      </div>
    </div>

    <div class="fot">
      <div class="fot1">
        <img src="./assets/5.png" alt="" />
      </div>
      <div class="fot2">
        <span class="sp7">ADLV服饰专场</span>
        <span class="sp8">acme de la vie</span><br />
        <span class="sp9">仅剩01天13时03分</span>
      </div>
    </div>

    <div class="fot">
      <div class="fot1">
        <img src="./assets/5.png" alt="" />
      </div>
      <div class="fot2">
        <span class="sp7">ADLV服饰专场</span>
        <span class="sp8">acme de la vie</span><br />
        <span class="sp9">仅剩01天13时03分</span>
      </div>
    </div>
     
   
    <div class="fot">
      <div class="fot1">
        <img src="./assets/5.png" alt="" />
      </div>
      <div class="fot2">
        <span class="sp7">ADLV服饰专场</span>
        <span class="sp8">acme de la vie</span><br />
        <span class="sp9">仅剩01天13时03分</span>
      </div>
    </div>

    <div class="fot">
      <div class="fot1">
        <img src="./assets/5.png" alt="" />
      </div>
      <div class="fot2">
        <span class="sp7">ADLV服饰专场</span>
        <span class="sp8">acme de la vie</span><br />
        <span class="sp9">仅剩01天13时03分</span>
      </div>
    </div>

    <div class="fot">
      <div class="fot1">
        <img src="./assets/5.png" alt="" />
      </div>
      <div class="fot2">
        <span class="sp7">ADLV服饰专场</span>
        <span class="sp8">acme de la vie</span><br />
        <span class="sp9">仅剩01天13时03分</span>
      </div>
    </div>

    <div class="fot">
      <div class="fot1">
        <img src="./assets/5.png" alt="" />
      </div>
      <div class="fot2">
        <span class="sp7">ADLV服饰专场</span>
        <span class="sp8">acme de la vie</span><br />
        <span class="sp9">仅剩01天13时03分</span>
      </div>
    </div>
    </div>
    
    <!-- 底部 -->
    <footer>
      <div class="footerone">
        <img
          src="http://s1.jmstatic.com/templates/touch/css/v3/image/footer_bg.jpg"
        />
      </div>

      <ul class="footertwo">
        <li class="lione">触屏版</li>
        <li class="litwo">电脑版</li>
      </ul>

      <p class="pp">?2016 聚美优品 Jumei.com</p>
    </footer>
    

  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      active: 0,
      list: [
        {
          id: 1,
          title: "首页",
        },
        {
          id: 2,
          title: "极速免税",
        },
        {
          id: 3,
          title: "母婴",
        },
        {
          id: 4,
          title: "轻奢",
        },
        {
          id: 5,
          title: "名品特卖",
        },
      ],
    };
  },
  methods: {
    onSearch() {},
  },
};
</script>

<style>
html,
body {
  width: 100%;
  height: 100%;
}
.aa {
  text-align-last: center;
}
.van-tab :hover {
  color: #ff4070;
}
.top {
  width: 100%;
  height: 38px;
  /* background-color: #ff4070; */
  display: flex;
}
.bb {
  width: 200px;
  margin: 0 auto;
  /* background-color: aqua; */
  text-align: center;
  padding-top: 8px;
  position: relative;
}
.cc {
  color: #ff4070;
  position: absolute;
  left: 44px;
}
.cen {
  width: 100%;
  height: 176px;
  /* background-color: blue; */
  display: flex;
  border-bottom: 8px solid #eeeeee;
}
.cen > .lef {
  width: 158px;
  height: 100%;
  background-color: blueviolet;
  background-image: url(./assets/4.png);
  background-repeat: no-repeat;
  border: none;
}
.cen > .rgt {
  flex: 1;
  /* background-color: chartreuse; */
  /* display: flex; */
}
.cen > .rgt > .tp {
  width: 100%;
  height: 76px;
  /* background-color: palegoldenrod; */
  padding-top: 16px;
}
.cen > .rgt > .tp > .sp1 {
  color: #ff4070;
  font-weight: bold;
}
.cen > .rgt > .tp > .sp2 {
  font-size: 18px;
  color: #818181;
}
.cen > .rgt > .tp > .sp3 {
  color: #c1c1c1;
  /* text-decoration: line-through; */
}
.cen > .rgt > .bt {
  width: 100%;
  height: 84px;
  /* background-color: peru; */
  padding-top: 16px;
  box-sizing: border-box;
}
.cen > .rgt > .bt > .sp4 {
  color: #ff4070;
}
.cen > .rgt > .bt > .sp5 {
  color: #ff4070;
  font-weight: bold;
  font-size: 20px;
}
.cen > .rgt > .bt > .sp6 {
  text-decoration: line-through;
  color: #c1c1c1;
}
.fot {
  height: 233px;
  /* background-color: green; */
  /* border: 8px solid #c1c1c1; */

}
.fot1 {
  width: 100%;
  height: 170px;
  /* background-color: greenyellow; */
}
.fot1 > img {
  width: 100%;
  height: 100%;
}
.fot2 {
  height: 62px;
  /* background-color: hotpink; */
  padding-left: 20px;
}
.fot2 > .sp7 {
  margin-right: 120px;
  font-size: 18px;
  font-weight: bold;
}
.fot2 > .sp8 {
  font-weight: bold;
}
.fot2 > .sp9 {
  color: #c1c1c1;
}

/* 底部 */
footer {
  width: 375px;
  height: 243px;
  /* background-color: red; */
  overflow: hidden;
}

footer > .footerone {
  width: 351px;
  height: 70px;
  margin-top: 16px;
}
footer > .footerone > img {
  width: 100%;
  height: 100%;
}

footer > .footertwo > li {
  margin: 0 20px;
  margin-top: 20px;
  border: 1px solid gray;
  border-radius: 20px;
  text-align: center;
  line-height: 30px;
}
footer > .footertwo > .lione {
  float: left;
  margin-left: 80px;
  width: 80px;
  height: 30px;
}
footer > .footertwo > .litwo {
  margin-right: 80px;
  float: right;
  width: 80px;
  height: 30px;
}
footer > .footertwo > li:hover {
  color: pink;
}

footer > .pp {
  width: 351px;
  height: 20px;
  margin-top: 20px;
  padding-left: 80px;
  float: left;
  color: #ccc;
}

</style>